<template>
  <div class="nav">
    <h2>云音乐特色榜</h2>
    <ul>
      <li v-for="(item, index) in topData.slice(0,4)" :key="index" @click="navClick(item)" :class="[navId == item.id? 'active' : '']">
        <!-- 左 -->
        <div class="left">
          <el-image :src="item.coverImgUrl" alt="" lazy/>
        </div>
        <!-- 右 -->
        <div class="right">
          <p class="p1">{{item.name}}</p>
          <p class="p2">{{item.updateFrequency}}</p>
        </div>
      </li>
    </ul>
    <h2>全球媒体榜</h2>
    <ul>
      <li v-for="(item1, index1) in topData.slice(4)" :key="index1"  @click="navClick(item1)" :class="[navId == item1.id? 'active' : '']">
        <!-- 左 -->
        <div class="left">
          <el-image :src="item1.coverImgUrl" alt="" lazy/>
        </div>
        <!-- 右 -->
        <div class="right">
          <p class="p1">{{item1.name}}</p>
          <p class="p2">{{item1.updateFrequency}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'NavList',
  data() {
    return {
      navId:  `${this.$route.query.id ||  `19723756`}` 
    }
  },
  
  props: {
    topData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    navClick(item) {
      
     
      console.log(item);
      this.$router.push({
        path: '/discover/toplist',
        query: {
          id: item.id
        }
      }).catch(err => err)
    }
  },
  watch: {
    $route() {
      console.log(this.$route.query.id);
      this.navId = this.$route.query.id
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  background: #e6e6e6;
}
.nav {
  width: 100%;
    h2 {
      padding: 0 10px 12px 15px;
      font-size: 15px;
      padding-top: 40px;
    }
  ul {
    li {
      display: flex;
      height: 62px;
      padding: 10px 0 10px 20px ;
      &:hover {
        background: #f4f2f2;
        cursor: pointer;
      }
      .left {
        width: 40px;
        height: 40px;
        .el-image {
          display: block;
          width: 100%;
          width: 100%;
        }
      }
      .right {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .p2 {
          color: #999;
        }
      }
    }
  }
}
</style>